<template>
	<view class="alarm-page">
		<view class="alarm-list">
			<view class="alarm-item" v-for="(item, index) in alarms" :key="index">
				<!-- 告警时间 -->
				<view class="alarm-time">{{ item.time }}</view>
				<!-- 告警内容 -->
				<view class="alarm-content">{{ item.content }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const alarms = ref([])

	// 模拟接口请求
	const fetchAlarms = async () => {
		return [{
				time: '2025-11-16 15:40:24',
				content: '空气湿度传感器40分钟内物信数据上传，（最新告警时间2025-11-16 15:40:24）,该设备24小时内不会重复告警，请及时处理！'
			},
			{
				time: '2025-11-16 14:20:11',
				content: '温度传感器超过阈值，（最新告警时间2025-11-16 14:20:11），请检查设备运行状态！'
			}
		]
	}

	onMounted(async () => {
		alarms.value = await fetchAlarms()
	})
</script>

<style lang="scss" scoped>
	.alarm-list {
		padding: 20rpx;
	}

	.alarm-item {
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-bottom: 20rpx;
		background: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.alarm-time {
		font-size: 26rpx;
		font-weight: bold;
		color: #d9534f;
		/* 红色强调告警时间 */
		margin-bottom: 12rpx;
	}

	.alarm-content {
		font-size: 24rpx;
		color: #333;
		line-height: 1.6;
		word-break: break-all;
		/* 长内容自动换行 */
	}
</style>